<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<view class="content-box">
			<view class="u-flex" style="font-size: 28rpx">
				<view class="u-flex u-flex-4 u-col-center u-m-r-10">
					<view style="width: 120rpx;font-size: 28rpx">项目:</view>
					<view class="u-flex u-row-between u-border-20 top-search" style="font-size: 28rpx;border-radius:24rpx">
						<u-input type="select" v-model="taskData.projectname" :select-open="showXiangmu" placeholder="请选择任务项目"
						         @click="showXiangmu = true;project_copy=JSON.parse(JSON.stringify(taskData.project));rojectname_copy=JSON.parse(JSON.stringify(taskData.projectname))"
								 @clear="showXiangmu = false;project_copy= '';taskData.project='';taskData.projectname='';rojectname_copy='';restData()">
						</u-input>
						<u-icon name="arrow-down" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
					</view>
				</view>
				<view class="u-flex u-flex-6 u-col-center">
					<view style="width: 120rpx;font-size: 28rpx">时间:</view>
					<view class="u-flex u-row-between u-border-20 top-search u-w-100s" @click="showriqiPopu()" style="font-size: 28rpx;border-radius:24rpx">
						<view :style="{color: startTime?'#000':'#B5B5B5',width:'45%','text-align':'center'}">{{startTime?startTime:'开始时间'}}</view>
						<view class="u-m-l-10">-</view>
						<view :style="{color: endTime?'#000':'#B5B5B5',width:'45%','text-align':'center'}">{{endTime?endTime:'结束时间'}}</view>
						<u-icon name="close-circle-fill" color="#ccc" v-if="endTime&&startTime" @click="showXiangmu=false;startTime='';endTime='';restData()"></u-icon>
					</view>
				</view>
			</view>
			<view v-if="!isEmpty" class="u-m-t-20">
				<view class="collect-list u-flex u-w-100s u-row-between collect-list-top u-p-t-20 u-p-b-20">
					<view class="shouhuan u-flex u-row-center">项目</view>
					<view class="shouhuan u-flex u-row-center">运动成绩</view>
					<view class="shouhuan u-flex u-row-center">运动耗时</view>
					<view class="xuhao u-flex u-row-center">评分</view>
					<view class="shouhuan u-flex u-row-center">时间</view>
				</view>
				<view class="collect-list u-flex u-w-100s u-row-between u-p-t-20 u-p-b-20" v-for="(goods, index) in myGroupList" :key="index">
					<view class="shouhuan u-flex u-row-center">{{goods.project}}</view>
					<view class="shouhuan u-flex u-row-center">{{goods.score!=null?goods.score:'-'}}</view>
					<view class="shouhuan u-flex u-row-center">{{goods.duration!=null?goods.duration:'-'}}</view>
					<view class="xuehao u-flex u-row-center">{{goods.pingscore!=null?goods.pingscore:'-'}}</view>
					<view class="shouhuan u-flex u-row-center">
						{{goods.startTime}}
					</view>
				</view>
			</view>
			<u-popup v-model="showXiangmu" mode="bottom" :mask-close-able="false" :border="20" :closeable="false" close-icon-pos="top-right">
				<view class="modal-box page_box">
					<view class="modal-head u-flex u-row-between u-w-100s u-p-20">
						<button class="u-reset-button back-btn" @tap="showXiangmu=false;taskData.project=project_copy;taskData.projectname=rojectname_copy">取消</button>
						<text class="head-title" style="font-size: 32rpx">体测项目</text>
						<button class="u-reset-button notice-btn" style="color: #3FA897" @tap="showXiangmu=false;restData()">提交</button>
					</view>
					<view class="modal-content u-flex u-flex-col u-col-top u-m-t-30 u-m-b-100 u-w-100s ">
						<scroll-view scroll-y="true" class="modal-content">
							<view @click="taskData.project = item.id;taskData.projectname = item.name" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-row-between"
							      style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in xiangmulist" :key="item.id">
								
								<view class="u-flex">
									<view>{{ item.name }}</view>
								</view>
								<image :src="API_URL()+'images/select.png'" mode="" v-if="taskData.project == item.id"
								       style="width: 32rpx;height: 32rpx;"></image>
							</view>
						</scroll-view>
					</view>
					<view class="modal-foot u-flex u-row-center u-col-center">
						<view class="u-flex u-row-around u-w-100s">
						
						
						</view>
					</view>
				</view>
			</u-popup>
			
			<u-calendar v-model="showriqi" :mode="mode" :active-bg-color="'#3FA897'" max-date="2050-01-01" @change="changeDate" :range-bg-color="'#caeee6'" :range-color="'#3FA897'" :customStyle="{background:'#3FA897'}"></u-calendar>
			<!-- 数据为空 -->
			<shopro-empty v-if="isEmpty" tipText="暂无班级成员~">
			</shopro-empty>
			<!-- 更多 -->
			<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc"/>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
import {mapGetters} from 'vuex';
import {API_URL} from '@/env'

export default {
	components: {},
	data() {
		return {
			stickyTop    : 0,
			searchVal    : '',
			isChoosed    : false,
			isEmpty      : false,
			isRefresh    : true,
			isScorll     : false,
			showDetel    : false,
			showModal    : false,
			myGroupList  : [],
			tagList      : [],
			tagchecked   : '',
			position     : "",
			tagindex     : '',
			isedit       : false,
			loadStatus   : 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage  : 1,
			lastPage     : 1,
			total  : '',
			classId: '',
			classnum:'',
			braceletnum:'',
		   showriqi   : false,
			startTime:'',
			endTime          : '',
			project_copy:'',
			rojectname_copy:'',
		    showXiangmu:false,
			xiangmulist: [],
			taskData:{
				projectname:'',
				project:'',
			},
		};
	},
	computed: {
		...mapGetters(['isLogin', 'userInfo']),
	},
	created() {
		// 触底监听
		uni.$on('uOnReachBottom', data => {
			if (this.loadStatus == 'loadmore') {
				this.currentPage += 1;
				this.getmyGroupList();
			}
		});
	},
	onPullDownRefresh() {
	},
	onShow() {
		let that    = this;
		this.enable = true;
	},
	onHide() {
		this.enable = false;
	},
	onLoad() {
		this.classId = this.$Route.query.id;
		this.myGroupList = [];
		this.currentPage = 1;
		this.getmyGroupList()
		this.getmyxiangmu()
	},
	mounted() {
	},
	watch  : {},
	methods: {
		getmyxiangmu(){
			let that = this;
			that.$http('login.getmyxiangmu', {
				oid: that.userInfo.schoolId
			}).then(res => {
				
				that.xiangmulist = res.data;
				
			});
		},
		API_URL() {
			return API_URL
		},
		// 初始化
		init() {
			this.isRefresh = false;
		},
		showriqiPopu(){
			this.showriqi = true;
		},
		changeDate(e) {
			this.startTime = e.startDate;
			this.endTime = e.endDate;
			this.restData();
		},
		// 路由跳转
		jump(path, parmas) {
			console.log('-----11111');
			this.$Router.push({
				path : path,
				query: parmas
			});
		},
		// 组织成员列表
		getmyGroupList() {
			let that = this;
			that.$http('login.taskrecord', {
				projectId: that.taskData.project,
				starttime:this.startTime,
				endtime:this.endTime,
				page    : that.currentPage,
				pageSize: 20
			}).then(res => {
				that.myGroupList = [...that.myGroupList, ...res.data];
				that.isEmpty     = !that.myGroupList.length;
				that.loadStatus  = res.data.length == 20 ? 'loadmore' : 'nomore';
			});
		},
		restData(){
			this.myGroupList = [];
			this.currentPage = 1;
			this.getmyGroupList()
		}
	}
};
</script>

<style lang="scss">
.home-wrap {
	padding: 0 30rpx 30rpx;
}

//nav
page {
	background: #fff;
}

.userInfo {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	
	.userleft {
		.usertitle {
			font-size: 30rpx;
		}
	}
	
	.userright {
		padding: 4rpx 24rpx;
		background: #0081ff;
		border-radius: 45rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		margin: 0;
	}
	
}
.tablist{
	width: 100%;
	border-radius:38rpx;
	background: #fff;
	font-size:32rpx;
	.tab-item{
		&.actived{
			background:#3FA897;
			color:#fff;
			border-radius:38rpx;
		}
		
	}
}
.zixun-item {
	border-radius: 30rpx;
	background: #fff;
	overflow: hidden;
	
	.zixuntitle {
		color: #333;
		font-size: 32rpx;
	}
	
	.zixunimg {
		width: 100%;
		height: 180rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.zixuntime {
		color: #333;
		font-size: 32rpx;
	}
	
	.yichu {
		padding: 16rpx 26rpx;
		border-radius: 34rpx;
		background: #0081ff;
		color: #fff;
	}
	
	.tag {
		background: #fff;
		color: #5e00ff;
		padding: 10rpx 18rpx;
		font-size: 20rpx;
		border-radius: 34rpx;
		border: 2rpx solid #5e00ff;
	}
	.task-list{
		
		.task-list-item{
			width: 33%;
			color: #8E8E8E;
		}
		.task-list-items{
			width: 33%;
			font-size: 34rpx;
			color: #010101;
			text-align: center;
		}
	}
}

.detlebtn {
	height: 100%;
	background: #ff0000;
	width: 120rpx;
	border-radius: 20rpx;
}

// 提示
.notice-modal {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 85vw;
	min-height: 358rpx;
	background: #ffffff;
	padding: 30rpx;
	border-radius: 20rpx;
	
	.notice-title {
		width: 100%;
		font-size: 30rpx;
		font-weight: bold;
		color: #46351b;
		text-align: center;
	}
	
	.notice-detail {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 36rpx;
		margin-bottom: 50rpx;
	}
	
	.back-btn {
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
		background: #f8f8f8;
		box-shadow: 0 7rpx 8rpx 2rpx #ccc;
		border-radius: 35rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.notice-btn {
		width: 45%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		border-radius: 35rpx;
		background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
		box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
	}
}
.collect-list{
	background: #fff;
	border-bottom: 1rpx solid #F5F5F5;
	.xuhao{
		width: 15%;
	}
	.xuehao{
		width: 15%;
	}
	.isbangding{
		width: 15%;
	}
	.shouhuan{
		width: 40%;
	}
}
.collect-list-top{
	background: #F5F5F5;
	color:#8E8E8E;
}


// 弹窗
.modal-box {
	width: 750rpx;
	border-radius: 30rpx 30rpx 0 0;
	background: #fff;
	
	.modal-head {
		height: 92rpx;
		border-bottom: 1px solid rgba(223, 223, 223, 0.5);
		padding: 0 30rpx;
		
		.head-title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
	.modal-content {
		
		.into-item {
			width: 24%;
			margin-right: 7rpx;
			padding: 10rpx 0;
			border: 2rpx solid #f3f4f6;
			color: #333;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			&.active {
				color: #fff;
				background: #0081ff;
			}
		}
	}
	
	.modal-foot {
		font-size: 24rpx;
		padding: 20rpx 0;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		border-top: 1px solid rgba(223, 223, 223, 0.5);
		
		.back-btn {
			width: 45%;
			height: 70rpx;
			line-height: 70rpx;
			background: #f8f8f8;
			box-shadow: 0 7rpx 8rpx 2rpx #ccc;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.notice-btn {
			width: 45%;
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #fff;
			border-radius: 35rpx;
			background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
			box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
		}
	}
}
::v-deep .u-swipe-action{
	border-radius:30rpx;
}
.shouhuan-tishi{
	color:#FA3E3E;
	background: #FFEDED;
	border-radius: 20rpx;
}
.top-search{
	background: #fff;
}
.modal-content{
	max-height: 40vh;
}
</style>
